﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--Style Section-->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <style type='text/css'>
        body
        {
            background-color: #CCC;
        }
        .sidebar
        {
            padding: 10px;
        }
        .main
        {
            padding: 20px;
        }
        
        #content
        {
            background-color: #FFF;
            border-radius: 5px;
        }
    </style>
    <!--Style Section-->
    <title>My Test Template</title>
</head>
<body>
    <div class="container" id="Maindiv" style="margin: auto">
        <h1>My first Test Template</h1>

<!--Navigation Bar Starts -->
        <div class='navbar navbar-inverse'>
            <div class='navbar-inner' style="height: auto;">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                        <span class="icon-bar" /><span class="icon-bar" /><span class="icon-bar" /></a>
                    <div class="nav-collapse collapse navbar-inverse-collapse">
                        <ul class="nav">
                            <li class="active"><a href="BaseDesign.htm">Home</a></li>
                            <li><a href="FormDesign.htm">Form Example</a></li>
                            <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            PageTwo <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">as Menu</a></li>
                                    <li><a href="#">aeesd Menu</a></li>
                                    <li><a href="#">aeesd Menu</a></li>
                                    <li><a href="#">aassd Menu</a></li>
                                    <li><a href="#">ee Menu</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
       
<!--Navigation Bar Ends-->

        <div id='content' class='row-fluid'>

<!--Side Bar Starts -->
            <div class='span3 sidebar'>
                <h2>
                    Sidebar</h2>
                <ul class="nav nav-tabs nav-stacked">
                    <li><a href='#'>Another Link 1</a></li>
                    <li><a href='#'>Another Link 2</a></li>
                    <li><a href='#'>Another Link 3</a></li>
                </ul>
            </div>
<!--Side Bar Ends-->

            <div class='span9 main'>
                <h2>Form Example</h2>

                <form class="form-horizontal">
        <fieldset>
          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Text input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="optionsCheckbox">Checkbox</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox" value="option1">
                Option one is this and that—be sure to include why it's great
              </label>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="select01">Select list</label>
            <div class="controls">
              <select id="select01">
                <option>something</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <input type="text" id="21" class="input-mini" />
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="multiSelect">Multicon-select</label>
            <div class="controls">
              <select multiple="multiple" id="multiSelect">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="fileInput">File input</label>
            <div class="controls">
              <input class="input-file" id="fileInput" type="file">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="textarea">Textarea</label>
            <div class="controls">
              <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button class="btn">Cancel</button>
          </div>
        </fieldset>
</form>
               
            </div>
        </div>
    </div>
    <!--Script Section-->
    <script src="../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!--Script Section-->
</body>
</html>
